<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shader</title>
    <script src="./js/three.min.js"></script>
</head>
<body style="margin: 0;">
    <div id="container"></div>
</body>
<script>
    const uniforms = {
        'amplitude': { value: 1.0 },
		'color': { value: new THREE.Color( 0xffffff ) },
        'colorTexture': { value: new THREE.TextureLoader().load( 'textures/girl.png' ) }
    }
    uniforms[ 'colorTexture' ].value.wrapS = uniforms[ 'colorTexture' ].value.wrapT = THREE.RepeatWrapping;

    function updateUniforms() {
        uniforms[ 'amplitude' ].value = 2.5 * Math.sin( 1);
		uniforms[ 'color' ].value.offsetHSL( 0.0005, 0, 0 );
        requestAnimationFrame(updateUniforms)
    }
    updateUniforms()
</script>
<script id="vertexShader" type="x-shader/x-vertex">
    uniform float amplitude;
    attribute float displacement;
    varying vec3 vNormal;
    varying vec2 vUv;

    void main() {
        vNormal = normal;
        vUv = ( 0.5 + amplitude ) * uv + vec2( amplitude );

        vec3 newPosition = position + amplitude * normal * vec3( displacement );
        gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
        // gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    varying vec3 vNormal;
    varying vec2 vUv;

    uniform vec3 color;
    uniform sampler2D colorTexture;

    void main() {

        vec3 light = vec3( 0.5, 0.2, 1.0 );
        light = normalize( light );

        float dProd = dot( vNormal, light ) * 0.5 + 0.5;

        vec4 tcolor = texture2D( colorTexture, vUv );
        vec4 gray = vec4( vec3( tcolor.r * 0.3 + tcolor.g * 0.59 + tcolor.b * 0.11 ), 1.0 );

        gl_FragColor = gray * vec4( vec3( dProd ) * vec3( color ), 1.0 );

    }
</script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="./js/base.js"></script>
</html>